:root {
  --primary-color: #f7f7f7;
  --secondary-color: #212121;
  --lightgrey: #efefef;
  --darkgrey: #646464;
  --blue: #004157;
  --color-tag-bg: var(--blue);
  --color-tag-text: #fff;
}@font-face {
  font-family: 'AvenirNextLTPro-Regular';
  src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/AvenirNextLTPro-Regular.ttf?v=63853503819");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Marine-BlackItalic';
  src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/Marine-BlackItalic.otf?v=63853503870");
  font-weight: 400;
  font-style: normal;
  font-kerning: normal;
}
@font-face {
  font-family: 'Marine-UPRegular';
  src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/Marine-UPRegular.otf?v=63853503910");
  font-weight: 400;
  font-style: normal;
  font-kerning: normal;
}

@font-face {
  font-family: 'aptos';
  src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/aptos.ttf") format("ttf"),
       url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/aptos.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'aptos-bold';
  src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/aptos-bold.ttf") format("ttf"),
       url("https://dwvt5wwshu97q.cloudfront.net/uploads/233/themes/221/fonts/aptos-bold.otf") format("otf");
  font-weight: 400;
  font-style: normal;
}

.body {
  font-family: 'aptos', Helvetica, Arial, sans-serif;
  font-size: 1.7rem;
}
h1, h2, h3, h4, h5 {
	font-family: "marine", sans-serif;
	font-weight: 700;
	font-style: normal;
	line-height: 1.1;
	text-rendering: optimizeLegibility;
    text-transform:uppercase;
    font-kerning: normal;
  	letter-spacing:0.1em;
  	
	}

h1,.hero h1 {font-size:2.4em;}
h2 {font-size:2em;}
h3 {font-size:1.5em;}

@media screen and (min-width: 36em) {
  h1 {font-size: 3em;}
.hero h1 {font-size:3.5em;}
  h2 {font-size:2.5em;}
  h3 {font-size:2em;}
}

.lead {font-size:1.3em;}/* ---------------------------------
    Navbar styles 
   --------------------------------- */

#navbar {z-index:999;}

.navbar-section {
  padding-top: 0;
  padding-bottom: 0;
  /* navbar account name color */
  color: var(--blue);
  /* navbar color */
  background-color: white;
  /* navbar border at the bottom */
  border-bottom: 0px solid var(--blue);
}

/* navbar icons text color */
.navbar-section .selection-count,
.navbar-section .avatar-user-dropdown{
  color: var(--blue);
}

/* navbar user dropdown border color */
.navbar-section .avatar-user-dropdown{
  border-color: var(--blue);
}

/* navbar icons color */
.navbar-section .svg-stroke path,
.navbar-section .svg-stroke line{
  stroke: var(--blue);
}

/* navbar icons color */
.navbar-section .svg-fill path{
  fill: var(--blue);
}

/* mobile menu bg */
.navbar-section-content {
  background-color: #fff;
}

/* navbar links */
.navbar-section-content a, 
.navbar-section-content span.nav-item { 
  color: var(--blue);
  font-family: 'marine', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-kerning: 100;
}

/* Hide logo and account name on mobile */
.account-logo .logo {
  display: none; 
  max-height: 4rem;
}

span.account-name {
  font-size: 1.6rem;
  display: none;
}

.account-logo-mobile {
    left: auto;
    top: auto;
    width: auto;
    height: 4rem;
}

@media (min-width: 62em) {
  /* Display logo and account name on desktop */
  .navbar-section {
    height: 15rem;}
  .account-logo .logo,
  span.account-name {
    display:block;
    max-height:15rem;
    padding:0.5em 0;
  }	
}/* Footer styles */
/* ---------------------
   Main Elements
   --------------------- */
.body {
  background-color: var(--primary-color);
}
.main {margin-top:7rem;}

@media (min-width:768px) {
 .main {margin-top:15rem;}
}
.preview-mode .main {padding-top: 6rem;}

.welcome-paragraph {
  font-size:2rem;
}

section.intro,
section#intro,
.center {
  text-align:center;
}

mark {
	padding: 1rem 2rem;
	background-color: #f9d147;
    color: black;
}
.red {color:red;}

/* fix code wrapping on mobile */
pre {
font-family: monospace,monospace;
font-size: 1em;
max-width: 100%;
overflow: auto;
white-space: normal;
}

/* ----------------
   Search widget
   ---------------- */

.search-section {
  max-width: 120rem;
  margin: 5rem auto; 	
}

.search-label{
  display: none;
}

.filters{
  justify-content: center;
}

.search-grid-section .page-actions, 
.search-grid-section .grid, 
.search-grid-section .assets-pagination {
  background-color: var(--primary-color);
  padding-bottom:4rem;  
}
.change-grid-view .icon-text {
display: none;
}

.file-icon::before{
  border-color: var(--primary-color) var(--primary-color) rgba(255, 255, 255, .3) rgba(255, 255, 255, .35);
}

/* ----------------
   Masonry view 
   ----------------- */
.masonry-asset {
  margin-bottom: 2rem;
  background-color: white;
  padding: 0;
  float: left;
}
.masonry-asset:hover {opacity:0.6;}
.masonry-asset .asset-grid-icon {position:relative;}
.masonry-asset .asset-grid-name {margin-left:0;}

/* ------------
   Buttons 
   ------------ */
.button {
  color: #fff;
  background-color: var(--blue);
  padding: 1rem 2rem;
}

.normal-button {
  color: white;
  background-color: black;
  padding: 1rem 2rem;
}
.cancel-button, .cancel-my-account-button {color:red; text-decoration:underline; background-color:white;}

.button.button-with-border {
  border-color: black;
  background-color: transparent;
  color: #111;
}
.edit-profile-button {width:100%;}
.normal-button.save-profile-changes-button,
.normal-button.save-profile-changes-button  {
padding: 1rem 2rem;
}

a:hover,
.asset-add-to-basket-button:hover,
.clear-search-btn:hover{
  opacity:0.6;
}

/* ------------
   Gallery 
   ------------ */

/*-- Mobile --*/
.gallery-link,
.gallery-image {
  height: 8rem;
}

/*-- Desktop --*/
@media (min-aspect-ratio: 1/1) {
  .gallery-link,
  .gallery-image {
    height: 16rem;
  }
}


/* --------------
   Home Page 
   -------------- */
.intro-logo {
	max-width:20rem;
}

/* Albums widget */
.album-cover,.album-with-no-cover {border:5px solid #ccc;}
.album-cover:hover, .album-with-no-cover:hover {border:5px solid #f9d147;}
/* new album select state */
a.album-selected {
  border: none;
  box-shadow: none;
}
a.album-selected img, a.album-selected div.album-with-no-cover {
  border:5px solid #f9d147;
  box-shadow: 0 15px 25px 1px #ccc;
}
a.album-selected span.album-title {
  color:#000;
  font-weight:bold;
}
/* end album select state */

/* custom social links article */
.social-links {margin-top:5em;}
.social-links a {font-size:2rem;padding:1rem 2rem;}
/* end */

/* fix download form terms field separation issue */
.form-checkbox.terms {
margin: 5rem 0;
}/* Grid assets and Asset details page */

/* content additions */
.asset-info span:not(.asset-id, .asset-source):before,
.AssetView .asset-size:before,
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before {
  content: ' • ';
}

.AssetView .asset-latitude:before {
  content:'Latitude: ';
}

.AssetView .asset-longitude:before {
  content:'Longitude: ';
}

.asset-source:before {
  content: 'src: ';
}

.asset-licence-value:before {
  content: ' -';
  margin-right: 0.5rem;
}

/* Hidden */
.asset-details-section .asset-type,
.asset-tags-title,
.asset-size-title,
.asset-dimensions-title,
.asset-created-at,
.asset-id-title,
.asset-licence-title,
.asset-word-count-title,
.collections-section-title {
  display: none;
}

/* Layout */

.asset-page-wrapper {
  padding: 2rem 2em;
}
@media (min-width:768px) {
  .asset-page-wrapper {
    padding: 6rem 6em;
  }
}

.asset-page-wrapper .section {
  padding: 1rem 0;
}

.asset-details-section {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.9rem;
}

.asset-details-section article {
  flex: 0 0 100%;
}                                                                                                       

.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count {
  flex: 0 0 auto;
}

.related-assets-section {
  border-top: 1px dotted color-mix(in srgb, var(--color-body-text) 20%, transparent);
  padding-bottom: 4rem;
}

/* Grid area ordering */ 

.AssetView .asset-name {
  order: 1;
  width: 100%;
}

.AssetView .asset-type-icon {
  order: 2;
}

.AssetView .asset-id {
  order: 3;
}

.AssetView .asset-word-count {
  order: 4;
}

.AssetView .asset-size {
  order: 5;
}

.AssetView .asset-dimensions {
  order: 6;
}

.AssetView .asset-description {
  order: 7;
}

.AssetView .asset-ai-description {
  order: 7;
}

.AssetView .asset-licence {
  order: 8;
}

.AssetView .asset-terms-of-use {
  order: 9;
  padding-bottom: 1rem;
}

.AssetView .asset-expiry-date {
  order: 10;
}

.AssetView .asset-created-at {
  order: 12;
}

.AssetView .asset-credit {
  order: 13;
}

.AssetView .asset-usage {
  order: 14;
}

.AssetView .asset-reference {
  order: 15;
}

.AssetView .asset-account {
  order: 15;
}

.AssetView .asset-location {
  order: 16;
}

.asset-page-wrapper {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details"  "tags tags tags" "actions actions actions";
}
.asset-page-wrapper.post {
  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}

@media (min-width:36em) {
  .asset-page-wrapper .section {padding: 0;}
  .asset-page-wrapper .asset-tags-section {padding: 3rem 0;}
  .asset-proxy-section {margin-right: 5rem;}
  .asset-page-wrapper {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy details" "proxy proxy tags";
  }
  .asset-page-wrapper.post {
    grid-template-areas: "breadcrumb actions actions" "proxy proxy proxy" "tags tags tags";
  }
}
/* Sign Up Page styles */
.new-account-section .form-section {
    background-color:transparent;
    padding:0;
  }

.new-account-hint {font-size:2.5rem;}

.new-account-section .form-section form {
  background-color:antiquewhite;
  border-radius:1em;
  padding:1em;
}

@media screen and (min-width: 75em) {
  .new-account-section .form-section {
    width: 33vw;
    min-width:30em;
    margin:1em auto;
    background-color:transparent;
  }
  .new-account-section .form-section form {
    background-color:antiquewhite;
    border-radius:1em;
    padding:2em;
  }


  .new-account-section .new-account-embeded-image {
    padding:3rem;
    max-width:66vw;
  }
  
  blockquote {padding:2em;}
  
  blockquote span {
    display:block;
    width:100%;
    font-size:2.2rem;
    font-weight:bold;
  }
   blockquote cite {
  	 display:block;
     width:100%;
     font-size:1em;
     text-align:center;
  }	
  
  .signup-faq {margin:2.5%; text-align:left!important; padding-top:1em;}
}
.desktop {display:none;}

@media screen and (min-width: 36em){
  .desktop {display:block;}
  .mobile {display:none;}
  .albums-horizontal-grid .album-wrapper {
	max-width:100%;
    overflow-wrap:normal;
    flex-wrap:wrap;
  }
}

/* faq styles */
dl {
  column-count: 1;
  column-gap: 0rem;
}

.fw dl {
  column-count: 1;
  column-gap: 0rem;
}
@media (min-width:768px) {
  dl {
    column-count: 2;
    column-gap: 5rem;
  }
  .fw dl {
    column-count: 3;
    column-gap: 5rem;
  }
}

dt {font-weight:bold;}
dt.subtitle {border-bottom: 2px solid #000;margin:2rem 0;}
dt.subtitle:first-child {border-bottom: 2px solid #000;margin:0 0 2rem 0;}
dd {margin-bottom:1rem;}.bk-wall .brandkit-logo, .bk-wall .logo {
    max-height: 20rem;
}

@media screen and (min-width: 48em) {
  .bk-wall {
    margin: 20rem 4rem 4rem;
  }
}

.bk-wall .button {line-height: 1.8;}/* full width section */
.fw {padding:4em 0;}

@media (min-width:77rem) {
  .fw {
    width:100vw;
    padding:4em 0;
  } 
}

/* full height section */
.fh {
  padding-top:0;
  padding-bottom:0;
}

.two-thirds-width {
	max-width:1024px;
    margin:auto;
}

.whitebg {background-color:#fff;}

/* show the Search label and the And/Or toggle in the Search Grid - check render colour in each theme */
label.search-label {display:block;}/* albums section */
.albums-section {
  width:100vw;
  padding-top:2rem;
  padding-left:2em;
  padding-right:2em;
  padding-bottom:2em;
}

.albums-section img {margin:0 auto;}
.albums-section p img {margin:0 auto;}
.albums-section:first-child {padding-top:12rem;}

@media (min-width:768px) {
  .albums-section {
    margin:auto;
    padding-left:6rem; 
    padding-right:6rem;
    padding-left:calc(50% - 300px); 
    padding-right:calc(50% - 300px);
  }
}  
@media (min-width:1040px) {
  .albums-section {
    padding-left:6rem; 
    padding-right:6rem; 
    padding-left:calc(50% - 450px); 
    padding-right:calc(50% - 450px);  
  }
}  
@media (min-width:1200px) {
  .albums-section {
    padding-left:calc(50% - 450px); 
    padding-right:calc(50% - 450px);   
  }
}  
@media (min-width:1600px) {
  .albums-section {
    padding-left:calc(50vw - 600px); 
    padding-right:calc(50vw - 600px);  
  }
}  
@media (min-width:1920px) {
  .albums-section {
    padding-left:calc(50% - 600px); 
    padding-right:calc(50% - 600px);  
  }
}  


/* albums grid */

.albums-grid .album-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap:2rem;
}

.albums-grid .album {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  width: calc((100% - 4rem) /3);
  height: auto;
  float: left;
  justify-content: flex-start;
  align-items: center;
  position:relative
}

.albums-grid .album:first-child {
  width: calc(100% - 0rem);
  height:auto;
}

.albums-grid .album:after {
  position: absolute;
  opacity: 0;
  transition: all .2s;
  -webkit-transition: all .2s;
  content: " ";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:rgba(0, 0, 0, .3)
}

.albums-grid .album:hover:after {
  opacity:1
}

.albums-grid .album-with-no-cover, .albums-grid .album-cover {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  border-radius:0
}

.album-cover {
  border-radius: 50%;
  width: 12rem;
  height: 12rem;
  object-fit:cover
}

.albums-grid .album-title {
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  width:100%
}

.album-with-no-cover {
  height: 12rem;
  width: 12rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  position: relative;
  border:1px solid
}

.album-name {
  position: absolute;
  font-weight: 600;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space:nowrap
}

@media screen and (min-width: 768px) {
  .albums-grid .album-with-no-cover, .albums-grid .album-cover {
  }
}

@media screen and (min-width: 1040px) {
  .albums-grid .album {
  }

  .albums-grid .album-wrapper {
    gap: 2rem;
  }
}

@media screen and (min-width: 1600) {
  .albums-grid .album {
  }
}


.albums-grid .album-title {
  font-family: 'marine', sans-serif;
  font-weight:700;
  font-style:normal;
  text-transform:uppercase;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #121212aa;
  color:#fff;
}
.album-cover, .album-with-no-cover {
  border: 0px solid #fff;
}

.collection-description {
    margin-bottom: 0;
}